<template>
	<view 
		v-if="show"
		class="big-box" 
	>
		<view 
			v-if="showTitle"
			class="title-box" 
		>
			<view class="title-box-left">
				入场学习
			</view>
		</view>
		<view class="middle-box">
			<view style="display: flex;justify-content: space-between;">
				<view 
					style="
						display: flex;
						flex-direction: column;
						justify-content: space-between;"
				>
					<view
					style='
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #262626;
						'
					>
						入场学时
					</view>
					<view style="
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #7F7F7F;
								line-height: 37rpx;">
						<text style="margin-right: 110rpx;">
							应修:{{scoreInfo.total}} 
						</text>
						<text style="margin-right: 110rpx;">
							已修:{{scoreInfo.sum}}
						</text>
						<text style="color: #FA8643">
							进度:{{scoreInfo.baifenbi}}%
						</text>
					</view>
				</view>
				<view class="progress">
					<!-- <u-circle-progress 
						active-color="#FA8643" 
						:percent="Number(scoreInfo.baifenbi)"
						width="110"
						border-width='10'
					>
						<view class="u-progress-content"> 
							<view class="baifen">
								{{scoreInfo.baifenbi}}%
							</view>
						</view>
					</u-circle-progress> -->
				</view>
			</view>
			
			<view
				class="botton-buttom" 
				@click="jumpCertificatePage"
			>
				去学习
			</view>
			<!-- <view>
				<view class="score-box">
					<view class="progress-score">
						<view class="progress-score-top">
							{{scoreInfo.total}}
						</view>
						<view class="progress-score-button">
							应修
						</view>
					</view>
					<view class="progress">
						<u-circle-progress 
							active-color="#FA8643" 
							:percent="Number(scoreInfo.baifenbi)"
						>
							<view class="u-progress-content"> 
								<view class="baifen">
									{{scoreInfo.baifenbi}}%
								</view>
								<view class='wenzi'>
									完成率
								</view>
							</view>
						</u-circle-progress>
					</view>
					<view class="progress-score">
						<view class="progress-score-top">
						</view>
						<view class="progress-score-button">
							已修
						</view>
					</view>
				</view>
				<view 
					class="score-botton-box" 
					v-if="showTitle"
				>
					<view 
						class="score-botton" 
						@click="jumpStudyDetail"
					>
						我的学时
					</view>
				</view>
				<view 
					v-else 
					style="height: 20rpx;"
				></view>
				<view 
					v-if="showTitle"
					class="botton-buttom" 
					@click="jumpCertificatePage"
				>
					立即学习
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import requestAll from '@/pagesB/common/js/request/allRequest.js';
	export default {
		props: {
			showTitle:{ type: Boolean, default : true },//是否显示title
			bool: { type: Boolean, required:true },//触发刷新数据
		},
		// 页面事件
		data() {
			return {
				userInfo:{},
				scoreInfo:{},
				show:false
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('eduInfo')
			this.requestData()
		},
		watch: {
			bool: {
				handler(newV, oldV) {
					this.userInfo = uni.getStorageSync('eduInfo')
					this.requestData()
				},
			}
		},
		methods: {
			//我的入场学时记录
			jumpStudyDetail(){
				uni.navigateTo({
					url:`/pagesB/enterLearn/enterLearn?ag_project_id=${this.scoreInfo.ag_project_id}`
				})
			},
			//跳转携带tab
			jumpCertificatePage(){
				uni.setStorageSync('tab', 2)
				uni.switchTab({
					url:`/pages/tabbar/collective/index`
				})
			},
			requestData(){
				requestAll.getEnterScore({
					success:(res) => {
						this.show = res.bool
						if(res.bool){
							this.scoreInfo = res.data
						}
					}
				})
			}
			
		}
	}
</script>

<style scoped lang="less">
	.u-progress-content .wenzi{
		text-align: center;
		font-size: 26rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		color: #FA8643;
		line-height: 36rpx;
	}
	.u-progress-content .baifen{
		text-align: center;
		font-size: 24rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #262626;
		line-height: 35rpx;
		color: #FA8643;
	}
	.big-title{
		position: relative;
		font-size: 30rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 600;
		text-align: center;
		color: #262626;
		line-height: 70rpx;
	}
	.botton-buttom{
		margin: auto;
		width: 614rpx;
		height: 70rpx;
		background: #FA8643;
		border-radius: 35rpx;
		color: #fff;
		font-size: 26rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		line-height: 70rpx;
		text-align: center;
		margin-top: 30rpx;
	}
	.score-botton-box{
		display: flex;
		justify-content: space-between;
	}
	.score-botton{
		color: #FA8643;
		width: 176rpx;
		height: 56rpx;
		background: #fef2ec;
		border-radius: 28rpx;
		line-height: 56rpx;
		text-align: center;
		border-radius: 28rpx;
	}
	.progress-score-button{
		font-size: 26rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		color: #7f7f7f;
		line-height: 36rpx;
		text-align: center;
	}
	.progress-score-top{
		font-size: 36rpx;
		font-family: DIN, DIN-Medium;
		font-weight: 500;
		color: #262626;
		line-height: 40rpx;
		text-align: center;
	}
	.progress{
		justify-content: center;
	}
	.score-box{
		display: flex;
		align-items: center;
	}
	.line{
		border-top: 1px solid #f0f0f0;
		margin: 18rpx 0 24rpx 0;
	}
	.title-box-left{
		font-size:32rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: bold;
		color: #262626;
		line-height: 44rpx;
	}
	.title-box{
		margin-bottom: 26rpx;
	}
	.middle-box{
		background-color: #fff;
		border-radius: 18rpx;
		padding: 22rpx 34rpx 40rpx 34rpx;
	}
	.big-box{
		margin-top: 30rpx;
		box-sizing: border-box;
		padding:0 24rpx ;
	}
</style>